<template>
  <el-container style="height: 100%">
   
    <el-container>
      <el-header>

   <div style="margin-top:10px">

        <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#670200"
  text-color="#fff"
  active-text-color="#c20000">
  <el-menu-item index="Resource" class="header_item" style="font-size:25px"><i class="el-icon-setting"></i>
  学习资源
  </el-menu-item>
   <el-menu-item index="LearnList" class="header_item" style="font-size:25px"><i class="el-icon-notebook-2"></i>
   案例学习</el-menu-item>
   <el-menu-item index="AnalyseList" class="header_item" style="font-size:25px"><i class="el-icon-search"></i>案情分析</el-menu-item> 
   <el-menu-item index="Discuss" class="header_item" style="font-size:25px"><i class="el-icon-chat-line-round"></i>焦点讨论</el-menu-item> 
   <el-menu-item index="User" class="header_item" style="font-size:25px"><i class="el-icon-user"></i>个人中心</el-menu-item>
   <el-menu-item index="Tools" class="header_item" style="font-size:25px"><i class="el-icon-s-tools"></i>文书生成</el-menu-item>
  
   
  


</el-menu>
   </div>







      </el-header>
  
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key) {
        console.log(key);
        if(key != this.$route.path)
         this.$router.push({ name: key }); //路由跳转
      }
    }
  }
</script>


<style lang="scss" scoped>
.el-header{
  margin-top: 10px;
  margin-bottom: 50px;
}
.el-main {
  padding-top: 0;
}
.header_item
{
  margin-left: 50px;
   margin-right: 50px;
}
</style>